import Vue from 'vue'
import store from '@/store'

// v-permission
Vue.directive('permission', {
  inserted(el, binding) {
    // 获取从服务器获取的用户权限列表 Vuex|Storage 「格式:xxx|xxx...」
    let permission = store.state.permission
    let permissionList = []
    if (!permission) permission = ''
    permissionList = permission.split('|')
    // 获取用户传递的权限校验标识 「格式:xxx|xxx...」
    const passText = binding.value
    // 循环校验是否有权限
    const flag = permissionList.includes(passText)
    // 控制元素显示隐藏
    // console.log(el.parentNode)
    if (!flag) el.parentNode && el.parentNode.removeChild(el)
  }
})

// 设置v-throttle自定义指令
Vue.directive('throttle', {
  bind: (el, binding) => {
    console.log(binding)
    let throttleTime = binding.value[0] // 防抖时间
    if (!throttleTime) {
      // 用户若不设置防抖时间，则默认2s
      throttleTime = 2000
    }
    let cbFun
    let count = 0 // 点击次数
    el.addEventListener(
      'click',
      (event) => {
        count++
        // console.log(count)
        // console.log(binding.arg)
        // binding.arg.$message('sucess')
        if (!cbFun) {
          // 第一次执行
          cbFun = setTimeout(() => {
            cbFun = null
            count = 0
          }, throttleTime)
        } else {
          // 在已有定时器的时机内走的话 就阻止这个元素的事件冒泡并且阻止该元素上同事件类型的监听器被触发。
          event && event.stopImmediatePropagation()

          /* 点的真的过多的话触发一些提示  */
          const sulv = binding.value[1] ?? 5 // 在这个时间内最多触发次数提示
          if (count >= sulv) {
            binding.arg.$message({
              duration: 1000,
              type: 'warning',
              message: '点击次数过多稍后重试'
            })
            count = 0
          }
        }
      },
      true
    )
  }
})
